import React from 'react';
import ReactEcharts from 'echarts-for-react';
import echarts from 'echarts';

const Bar = () => {
  const option = {
      legend: {
          bottom: 20,
          textStyle:{
              color:'#fff',
          },
          data: ['钥匙量', '有效房源量'],
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '10%',
          containLabel: true
      },

              tooltip: {
          show:"true",
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
      },
      xAxis:  {
          type: 'value',
          axisTick : {show: false},
          axisLine: {
              show: false,
              lineStyle:{
                  color:'#fff',
              }
          },
          splitLine: {
              show: false
          },
      },
      yAxis: [
              {
                  type: 'category',
                  axisTick : {show: false},
                  axisLine: {
                      show: true,
                      lineStyle:{
                          color:'#fff',
                      }
                  },
                  data: ['广州','深圳','天津','北京','成都']
              },
              {
                  type: 'category',
                  axisLine: {show:false},
                  axisTick: {show:false},
                  axisLabel: {show:false},
                  splitArea: {show:false},
                  splitLine: {show:false},
                  data: ['广州','深圳','天津','北京','成都']
              },

      ],
      series: [
          {
              name: '有效房源量',
              type: 'bar',
              yAxisIndex:1,

              itemStyle:{
                  normal: {
                      show: true,
                      color: '#277ace',
                      barBorderRadius:50,
                      borderWidth:0,
                      borderColor:'#333',
                  }
              },
              barGap:'0%',
              barCategoryGap:'50%',
              data: [120, 132, 101, 134, 90]
          },
          {
              name: '钥匙量',
              type: 'bar',
              itemStyle:{
                  normal: {
                      show: true,
                      color: '#5de3e1',
                      barBorderRadius:50,
                      borderWidth:0,
                      borderColor:'#333',
                  }
              },
              barGap:'0%',
              barCategoryGap:'50%',
              data: [32, 52, 41, 64, 15, ]
          }

      ]
  };



    return (
      <div>
        <ReactEcharts
          option={option}
          style={{height: '30vh', width: '100%'}}
         />
      </div>
    );
}
export default Bar;
